<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../build/react.js"></script>
    <script src="../build/jquery-2.1.4.min.js"></script>
    <script src="../build/JSXTransformer.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script type="text/jsx">
        var CommentBox = React.createClass({
            render:function(){
                return (
                        <div className="commentBox">
                            <h1>Comments</h1>
                            Hello, world!I am a commentBox.
                            <CommentList />
                            <CommentForm />
                        </div>
                );
            }
        });

        var CommentList = React.createClass({
            render:function(){
                return (
                        <div className="commentList">
                            <Comment name="vivian" >My *name* is vivian.</Comment>
                            <Comment name="changjing" >My *name* is changjing.</Comment>
                        </div>
                );
            }
        });

        var Comment = React.createClass({
            render:function(){
                return (
                        <div className="comment">
                            <h2 className="commentName">
                                {this.props.name}
                            </h2>
                            {this.props.children}
                        </div>
                );
            }
        });

        var CommentForm = React.createClass({
            render: function () {
                return (
                        <div className="commentForm">
                            Hello, world! I am a commentForm.
                        </div>
                );
            }
        });

        //渲染
        React.render(
                <CommentBox />,
                document.getElementById("example"),
                function () {
                    console.log("我被渲染了...");
                }
        );
    </script>
</head>
<body>
<h3 id="example"></h3>
</body>
</html>